<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=1, user-scalable=no">
    <link href="" rel="stylesheet" type="text/css"/>
    <!--5/19-->
    <title>菜品</title>
    <style>
        * {
            moz-user-select: -moz-none;
            -moz-user-select: none;
            -o-user-select: none;
            -khtml-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none;
            padding: 0;
            margin: 0;
            font-family: "微软雅黑";
        }

        html, body {
            height: 100%;
        }

        .cai-warp {
            max-width: 600px;
            margin: 0 auto;
            height: 100%;
            position: relative;
        }

        .btn {
            width: 80%;
            height: 40px;
            text-align: center;
            position: absolute;
            bottom: 10%;
            left: 10%;
        }

        button:focus {
            outline: none;
        }

        .btn > button {
            display: inline-block;
            height: 100%;
            width: 100%;
            background: #c9ac51;
            border-radius: 20px;
            font-size: 20px;
            color: whitesmoke;
            font-weight: 400;
            line-height: 1.42857143;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            -ms-touch-action: manipulation;
            touch-action: manipulation;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            border: 0 solid;
        }

        .img-warp {
            width: 100%;
            height: 35%;
        }

        .img-warp > img {
            width: 100%;
            height: 100%;
        }

        p {
            padding: 0 20px;
            line-height: 25px;
        }
    </style>
</head>
<body>
<div class="cai-warp">
    <div class="img-warp">
        <img src="img/cai.jpg" alt="菜品">
    </div>
    <p style="padding-top:10px;font-size: 16px ;color: #333;">菜名</p>
    <p style="font-size: 14px ;color: #888;">月售15</p>
    <p style="font-size: 14px ;color: #c9ac51;">￥0.01</p>
    <div style="height: 10px;"></div>
    <p style="font-size: 14px ;color: #888;">商品信息</p>
    <p>菜品</p>
    <div class="btn">
        <button><a href="zhuce.html" style="text-direction:none;color:white ">立即下单</a></button>
    </div>
</div>

</body>
</html>